<template>
    <div class="container">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm">
            <img class="avatar" src="../assets/touxiang.webp" alt="">
            <el-form-item label="用户名" prop="user">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密 码" prop="pass">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { adminLogin } from '@/request/index'
import { setCookie } from '@/utils/cookie'
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useCounterStore } from '@/stores/counter'
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { changeLoginStatus } = store
const router = useRouter()
const route = useRoute()

const ruleFormRef = ref<FormInstance>()

const checkUser = (rule: any, value: any, callback: any) => {
    value = ruleForm.username
    console.log(value);
    
    let userReg = /^[a-zA-Z1-9\u4e00-\u9fa5]{3,10}$/
    if (!userReg.test(value)) {
        callback(new Error('用户名数字字母汉字组成3~10位！'));
    } else {
        callback();
    }
}

const validatePass = (rule: any, value: any, callback: any) => {
    value = ruleForm.password
    let passReg = /^.{6,12}$/
    if (!passReg.test(value)) {
        callback(new Error('密码长度要求6~12位！'));
    } else {
        callback();
    }
}

let ruleForm = reactive({
    username: '许小墨',
    password: '123123'
})

let rules = reactive<FormRules>({
    user: [
        { validator: checkUser, trigger: 'blur' }
    ],
    pass: [
        { validator: validatePass, trigger: 'blur' }
    ]
});
interface responseData {
    msg: string,
    error_code: number,
    data?: any
}
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    // console.log(formEl);
    formEl.validate(async (valid: any) => {
        let data: responseData = await adminLogin(ruleForm)
        if (data.error_code === 200) {
            setCookie('adminName', ruleForm.username, 7200)
            setCookie('adminId', data.data.userId, 7200)
            localStorage.setItem('adminToken', data.data.token)
            sessionStorage.setItem('auths', JSON.stringify(data.data.auths))
            changeLoginStatus()
            ElMessage({
                message: data.msg,
                type: 'success',
                duration: 2000,
                onClose: () => {
                    router.push('/home')
                }
            });
        } else {
            ElMessage({
                message: data.msg,
                type: 'error'
            });
        }
    })
};
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style lang="scss" scoped>
.container {
    background-color: #0769b4;
    height: 100%;
}

.el-form {
    width: 500px;
    padding-top: 50px;
    height: 210px;
    background-color: #eee;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
    z-index: 2;
    border: 1px solid #fff;
}

.el-input {
    width: 90%;
}
</style>
